<template>
  <div :style="sty">
    <!-- 公共标题 -->
    <div class="detail">
      <div class="common-form"@click="zh">
        <!-- 轮播 -->
        <div class="detail-banner"style="width: 100%;height: 20rem;">
          <div>
            <div class="swiper-container"style="width: 100%;height: 20rem;">
              <div class="swiper-wrapper"style="width: 100%;height: 20rem;">
                <div class="swiper-slide"style="width: 100%;height: 20rem;"v-for="(item,index) in imgBanner">
                  <img :src="imgTitl+item.image_url" :alt="imgTitl+item.image_url"width="100%"height="100%">
                </div>
              </div>
            </div>
          </div>
          <div class="detail-banner-dot">
            <em></em>
            <em class="detail-banner-dot-pink"></em>
            <em></em>
          </div>
        </div>
        <div>
          <div class="detail-tel">
            <p>{{DataList.goods_name}}</p>
            <!--<span><i></i>关注</span>-->
          </div>
          <div class="detail-price">
            <p>
              <!-- 价格：{{Number(DataList.price)*Number(IntegralRatio)}}积分 -->
            </p>
            <p>积分数：<em>{{(Number(DataList.gonghuojia)*Number(Eleven)).toFixed(2)}}积分</em></p>
          </div>
          <div class="detail-other">
            <em>邮费：0.00</em>
            <em>销量：1024</em>
            <em>库存：250</em>
          </div>
        </div>
      </div>
      <!-- 充值 -->
      <div class="common-form">
        <a class="detail-recharge">
          <em>充值</em> 充值会员  尊享3大权益<i>&gt;</i>
        </a>
      </div>
      <!-- 规格 -->
      <div class="common-form" @click="Specifications" style="display: none;">
        <div class="detail-service">
          <span><em></em>规格</span>
          <span style="color: #cccccc;opacity: 0;">请选择 {{color}}{{clas}} </span>
          <span style="text-align: right;float: right;">...</span>
        </div>
      </div>
      <!-- 服务 -->
      <div class="common-form">
        <div class="detail-service">
          <span><em></em>服务</span> 100%正品·品牌授权·48小时发货
        </div>
      </div>
      <div class="common-form">
      </div>
      <div class="common-form">
        <div class="detail-info" style="width: 100%" id="detail-info">
          <div v-html="html" style="width: 100%;">{{html}}</div>
        </div>
      </div>
      <div class="footer-100"></div>
      <!-- 详情底部 -->
      <div class="detail-footer">
        <a @click="switchTo('/Home')"><i></i><p>首页</p></a>
        <a href="客服.html"><i></i><p>客服</p></a>
        <!--<a href="Order.html">立即兑换</a>-->
        <p style="width: 60%;
    float: left;
    background: #FE2746;
    color: #FFF;
    text-align: center;
    height: 48px;
    line-height: 48px;
    height: 48px;
    color: #FFF;" @click="zhezhao">立即兑换</p>
      </div>
    </div>
    <div class="black" v-show="flag2" @click="hide"></div>
    <div style="width: 100%;height: 64%;background:white;position: fixed;bottom: 0rem;z-index: 3;left: 0rem;z-index:10" v-show="flag">
      <div style="width: 100%;height:10rem;overflow: hidden;display: flex;">
        <div style="width: 8rem;height: 8rem;background: white;margin: 1rem;border-radius: 5px;overflow: hidden;">
          <img :src="dataImg" alt=""width="100%"height="100%">
        </div>
        <div style="margin-top: 4.5rem;">
          <p style="color: #ff5000;line-height: 2rem;">{{(Number(DataList.gonghuojia)*Number(Eleven)).toFixed(2)}}积分</p>
          <p style="opacity: 0;">请选择:{{color}}{{clas}}</p>
        </div>
      </div>
      <div style="width: 100%;height: auto;">
        <div style="width: 90%;margin: 0 auto;">
          <p style="line-height: 2rem;">选项</p>
          <!--<hr style="color: white;">-->
          <div style="margin-top: 1rem;display: flex;flex-wrap: wrap;">
            <div v-for="(item,index) in leaveClass" style="margin-right: 1rem;">
              <el-radio v-model="radio" :label="index"border style="margin-bottom: .5rem;">{{item.spec_1}}</el-radio>
              <!--<el-radio disabled v-model="radio1" border label="禁用">备选项</el-radio>-->
            </div>
            <div style="margin-top: 1rem;">
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 1rem;"></div>
        <div style="width: 90%;margin: 0 auto;">
          <span style="text-align: left;line-height: 2rem;">数量</span>
        </div>
        <div style="width: 90%;margin: 0 auto;">
          <el-input-number v-model="num1" @change="handleChange" :min="1" size="mini" :max="10" label="描述文字"></el-input-number>
        </div>
        <div style="width: 100%;height: 50px;"></div>
        <div style="width: 88%;margin: 0 auto;position: absolute;bottom: 1rem;left: 5%;">
          <!--<el-button style="float: right;"@click="shop">立即兑换</el-button>-->
          <button style="width: 100%;
    height: 49px;
    line-height: 49px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(254, 39, 70);
    position: fixed;
    bottom: 0px;
    left: 0px;border: none"@click="shop">立即兑换</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  export default {
    name: 'IntegralDetail',
    data () {
      return {
        monmy: '积分',
        DataList: [],
        DataBanner: [],
        color: '颜色',
        clas: '分类',
        Colorr: [
        ],
        Stylee: [
          {
            text: '长款'
          }, {
            text: '短款'
          }, {
            text: '中长款'
          }
        ],
        spec: [],
        radio: '',
        radio2: '',
        num1: 1,
        dataShop: [],
        id: this.$route.params.id,
        apiUrl: 'goods/detail',
        data: [{}],
        openid: 'oEhus5qPt0FvUjLFVIN7jynQVJl8',
        apiUrl2: 'goods/description',
        data2: [{}],
        flag: false,
        flag2:false,
        imgTitl: 'http://statics.76sd.com',
        dataImg: '',
        opacity: '0',
        shoop: [],
        leaveClass: [],
        Goods: [],
        Datago: [],
        html: ``,
        imgBanner:[],
        Eleven:'11',
        sty:{
          overflow:'hidden'
        }
      }
    },
    methods: {
      switchTo (path) {
        this.$router.replace(path)
      },
      hide:function(){
        this.flag = false;
        this.flag2 = false;
        this.sty.height = '';
      },
      Specifications () {
        this.flag = true
        this.flag2 = true
      },
      zh () {
        this.flag = false
        this.flag2 = false
      },
      shop () {
        console.log(this.leaveClass[this.radio].spec_id)
        this.$router.push({name: 'NewAddress', params: {id: this.leaveClass[this.radio].spec_id, num: this.num1}})
      },
      Colo (index) {
        this.dataShop.push({Color: this.Colorr[index].text})
        console.log(this.dataShop)
        this.dataShop.splice(index, 1)
        console.log(this.dataShop.Colorr.splice(index, 1))
      },
      Styl (index) {
        this.dataShop.push({style: this.Stylee[index].text})
        console.log(this.dataShop)
      },
      handleChange (value) {
        console.log(value)
      },
      zhezhao () {
        this.flag = true;
        this.flag2 = true;
        this.sty.height = '100%'
      }
    },
    created () {
      this.data.push({id: this.id})
      this.data2.push({id: this.id})

      // 详情
      axios.get('integral/api/?', {
        params: {
          'apiUrl': this.apiUrl,
          'data': this.data[1],
          'openid': localStorage.getItem('openid')
        }
      }).then(response => {
        console.log(response)
        this.DataList = response.data.data.goods;
        this.dataImg = this.imgTitl + this.DataList.default_image;
        this.spec = this.DataList.spec;
        this.DataBanner = response.data.banner;
        this.leaveClass = response.data.data.goods.spec;
        this.imgBanner = response.data.data.img;
        console.log(this.imgBanner)
      }).catch(function (error) {
        console.log(error)
      })

      //  缩略图
      axios.get('/integral/api?', {
        params: {
          'apiUrl': this.apiUrl2,
          'data': this.data2[1],
          'openid': localStorage.getItem('openid')
        }
      }).then(response => {
        // console.log(response.data);
        this.html = response.data
      }).catch(function (error) {
        console.log(error)
      })

      this.dataImg = 'http://tstatics.76sd.com' + this.DataList.default_image
    },
    mounted () {
      // var swiper = new Swiper('.swiper-container');
      let swiper = new Swiper('.swiper-container', {
        autoplay: true,
        observer: true,
        observeParents: true
      })
    }
  }
  function addStorage (shooping, value) {
    localStorage.removeItem(shooping)
    localStorage.setItem(shooping, value)
  }

  function removeStorage (shooping) {
    localStorage.removeItem(shooping)
  }

  function getStorage (shooping) {
    var storage = window.localStorage
    var val = storage.getItem(shooping)
    return val
  }
</script>

<style>
  .black{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    /* display: none; */
  }
  .el-input--mini .el-input__inner {
    height: 28px;
    line-height: 28px;
    border: none !important;
    color: palevioletred;
    font-weight: bold;
  }
  .el-input-number__increase {
    right: 1px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #dcdfe6;
    background: none !important;
    border: none;
    font-weight: bold;
  }
  .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase {
    width: 28px;
    font-size: .12rem;
    background: none !important;
    border: none;
    font-weight: bold;
  }
  .el-input-number--mini {
    width: 104px !important;
    line-height: 26px;
  }
  #detail-info .picture{
    width: 100%;
  }
  #detail-info .picture img{
    width: 100%;
  }
  .el-radio.is-bordered.is-checked {
    border-color: deeppink !important;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: deeppink !important;
    background: deeppink !important;
  }
  .el-radio__input.is-checked+.el-radio__label {
    color: deeppink !important;
  }
</style>
